約 5,819,797 件
https://w.atwiki.jp/seg_fault/pages/5.html
CSSの勉強 まずは、この辺を読んでみるか。 CSS スピード・ラーニング
https://w.atwiki.jp/lastbible2/pages/4.html
/***** CSS変更 *****/ /*** メイン全体の枠の幅を1200pxから1200pxへ変更 ***/ /*** 右メニューをメニューの下へ配置 ***/ /*** 主コンテンツの幅を778pxから978px、右のマージンを200pxから0pxへ変更 ***/ /*** テーブルの見出しセルの背景色を#333へ変更 ***/ /*** 脚注がすべて同一行で表示されるのを各行に表示されるように変更 ***/ /* メイン全体の枠 */ #container{ min-width 1200px; _width 1200px; } /* ----- Contents ----- */ /* コンテンツの配置 */ #menubar2{ float left; clear both; } /* ----- Center ----- */ #contents{ margin 0px 0px 0px 200px; min-width 978px; } #wikibody th, #menubar2 th, #menubar th { background #333; } /* ----- Main ----- */ .attach, .footnote{ float none; } /***** CSS追加 *****/ /*** 取扱説明書に使用 ***/ .waku01 { margin 5px; padding 3px; border-radius 1em; border double 5px #FF0000; } .waku02 { margin 5px; padding 3px; border-radius 1em; border double 5px #8F66B1; }
https://w.atwiki.jp/v-lyrics/pages/443.html
せっとふりー [ TAG Alp-S E-Q Miku RyuuseiP title] Music RyuuseiP/流星P Lyric RyuuseiP/流星P Arrange RyuuseiP/流星P Vocal Hatsune Miku Videos PVs ■ Show/Hide Video http //www.nicovideo.jp/watch/sm3082002 http //www.nicovideo.jp/watch/sm3082002 ■ Show/Hide PV http //www.nicovideo.jp/watch/sm3656736 http //www.nicovideo.jp/watch/sm3656736 ■ Show/Hide PV http //www.nicovideo.jp/watch/sm7934836 http //www.nicovideo.jp/watch/sm7934836 Translations ■ Show/Hide Romaji taikutsu sugita nichijoo wo nukedashi takute hashitta ayamachi ni kizuite hikikaeshite son-na mainichi ni sayonara nani wo motomeru toka nani wo tsukamuno toka kotae ga aru nara sore koso tsumaranai! sugite ku kinoo wo okizari ni mienai asu eto hashiridase kirameku sekai no katasumi de atarashii imi wo terasu tayasuku "dekinai" to iwanai tomadou kokoro ni kugi wo sashi tooku ni hirogaru maboroshi wo genjitsu eto kaete yukou yowane haku nomo naku koto mo toki niwa hitsuyoo dakedo sore dake ja mae niwa susumenai to shitteru kara namida fuita tsuyoku omou dakede negai ga kanau nara dare mo joonetsu wo hitsuyoo to shinai sugisaru jikan wo nageku yori konosaki machigawazu susumou kakaeta kako no omosa yorimo tashikana mirai no tame sagashita kokoro no yukusaki ni sain (sign) wo utsushidasu hikari ga hitomi wo tojireba taema naku mabataite yonde iru kara mugen ni hirogaru ikutsu mono michi kara hitotsu wo erabidasu nanika wo teni irete ushinai kurikaesu hibi no hate sugite ku kinoo wo okizari ni mienai asu eto hashiridase kirameku sekai no katasumi de atarashii imi wo terasu tayasuku "dekinai" to iwanai tomadou kokoro ni kugi wo sashi tooku ni hirogaru maboroshi wo genjitsu ni kaeru tame shimetsukeru yowa sa wo hodoite kotae no nai hibi wo kakeruyo 2009-09-09 Checked by damesukekun 2009-09-09 23 41 Generated automatically [部分編集] ■ Show/Hide Translation SET FREE 2009-09-10 First Entry 2009-09-10 01 12 53 (Thu) Last update Trasnlated by damesukekun Title SET FREE Lyric I ran off cause I wanted to get away from the boring, toutine days I found mistakes and went back, goodbye, these days If the answer is in front of me, what I should ask, what I should catch, how boring it will be! Leave passing yesterday behind and run to invisible tomorrow! I light up a new meaning in the corner of this sparkling world I don t say cannots easily Let s close the door on indecisive mind and change the illusion into the real, the illusion spreading far away It s sometimes necessary to show white feather and give in tears But I knew I needed something more to go ahead so I wiped off my tears If a with came true with just a strong will, no one would need passion! Go ahead unfailingly rather than feeling sorry for the passing time For the sake of the future surer than the heaviness of the past carried Cause a light shines and calls me without cease when I close my eyes, the light that illuminates a sign to the direction the mind I looked for goes I choose one out of the infinite ways shown before my eyes At the end of the days I get something and lose it again and again Leave passing yesterday behind and run to invisible tomorrow! I light up a new meaning in the corner of this sparkling world I don t say cannots easily In order to close the door on indecisive mind and change the illusion into the real, the illusion spreading far away I unbind the tightening weakness and run through the days of no answer! Comment If you have any advise or opinion for this post please write here.この投稿に対して助言、ご意見などありましたらこちらに書き込んで下さい。 Name Comment すべてのコメントを見る Last modified 2009-09-10 01 12 53 (Thu) Original Lyric, Nicosound MP3, etc http //www5.atwiki.jp/hmiku/pages/781.html http //nicosound.anyap.info/sound/sm3082002 http //www.nicomimi.com/play/sm3082002 Sub video, PV, other fan made video in YouTube http //www.youtube.com/watch?v=DoF7Cm1Jj20 http //www.youtube.com/watch?v=13REo1mnBGk (3-D MMD) [Add] http //www.youtube.com/watch/xxxxxxxxx ADD LINK すべてのコメントを見る http //www.youtube.com/watch?v=13REo1mnBGk (3-D MMD) http //www.youtube.com/watch?v=DoF7Cm1Jj20 (Information in this page is based on HatsuneMiku@Wiki) _
https://w.atwiki.jp/ronde/pages/4.html
/***** CSS変更 *****/ /*** メイン全体の枠の幅を1200pxから1280pxへ変更 ***/ /*** 右メニューをメニューの下へ配置 ***/ /*** 主コンテンツの幅を778pxから1058px、右のマージンを200pxから0pxへ変更 ***/ /*** テーブルの見出しセルの背景色を#333へ変更 ***/ /*** 脚注がすべて同一行で表示されるのを各行に表示されるように変更 ***/ /* メイン全体の枠 */ #container{ min-width 1280px; _width 1280px; } /* ----- Contents ----- */ /* コンテンツの配置 */ #menubar2{ float left; clear both; } /* ----- Center ----- */ #contents{ margin 0px 0px 0px 200px; min-width 1058px; } #wikibody th, #menubar2 th, #menubar th { background #333; } /* ----- Main ----- */ .attach, .footnote{ float none; } /***** CSS追加 *****/ /* 縦書き */ .tategaki { -webkit-writing-mode vertical-rl; -ms-writing-mode tb-rl; writing-mode vertical-rl; text-orientation upright; width 100%; line-height 1.5; } /* floatプロパティで段組レイアウト作成 */ .block01 { float left; }
https://w.atwiki.jp/king1/pages/9.html
/**** andreas00 - an open source xhtml/css website layout by Andreas Viklund - http //andreasviklund.com/ . Free to use for any purpose as long as the proper credits are given to the original author. Version 2.0 (Jan 29, 2007) ****/ /**** Customized by @wiki.jp(http //atwiki.jp/) ****/ /****ads****/ .gafc_on{ /*background-color #FFEB8F;*/ } .gafc_domain{ /*color green;*/ } body{ /*background #eaeaea;*/ /*color #3a3a3a;*/ /*font 76% "arial", "helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "MS Pゴシック", clean, sans-serif;*/ /*margin 0px auto;*/ /*padding 0px;*/ } /**** Main layout and header ****/ #container{ /*background #fff;*/ /*color #303030;*/ /*margin 0px auto;*/ /*padding 1px 10px;*/ /*width 1100px;*/ /*border-left 1px solid #aaa;*/ /*border-right 1px solid #aaa;*/ /*-moz-box-shadow 0px 0px 20px #999;*/ /*-webkit-box-shadow 0px 0px 20px #999;*/ /*box-shadow 0px 0px 20px #999;*/ } #header{ /*color #505050;*/ /*height 250px;*/ /*margin 0px 0px 10px;*/ /*padding 0px;*/ /*background url(/common/_img/skin/037flower/front.jpg) no-repeat bottom right #C0E4F2;*/ } #header h1{ /*font-size 2.5em;*/ /*font-weight 400;*/ /*letter-spacing -2px;*/ /*margin 0px 0px 4px 15px;*/ /*padding 37px 0 0;*/ } #header h1 a, #header h1 a hover{ /*font-weight 400;*/ /*padding 0;*/ } #header h2{ /*font-size 1.1em;*/ /*letter-spacing -1px; /*margin 0px 0px 20px 15px; /*padding 0px 0px 0px 3px; } /**** Left sidebar and menu ****/ #menubar ul.avmenu{ /*list-style none; /*margin 0px 0px 18px; /*padding 0; /*width 190px; } #menubar ul.avmenu li{ /*display inline; /*padding 0px; /*width 190px; } #menubar ul.avmenu li a{ /*background url(/common/_img/skin/037flower/menubg.gif) repeat-x bottom left #f4f4f4;*/ /*border-bottom 1px solid #d8d8d8;*/ /*border-left 4px solid #ccc;*/ /*border-right 1px solid #d8d8d8;*/ /*border-top 1px solid #d8d8d8;*/ /*color #505050;*/ /*float left;*/ /*font-size 1em;*/ /*font-weight 700;*/ /*margin-bottom 5px;*/ /*padding 5px 1px 5px 5px;*/ /*text-decoration none;*/ /*width 178px;*/ } #menubar ul.avmenu li a hover, #menubar ul.avmenu li a.current{ /*background url(/common/_img/skin/037flower/menubg2.gif) repeat-x bottom left #eaeaea;*/ /*border-bottom 1px solid #b0b0b0;*/ /*border-left 4px solid #505050;*/ /*border-right 1px solid #b0b0b0;*/ /*border-top 1px solid #b0b0b0;*/ /*color #505050;*/ } #menubar ul.avmenu ul{ /*font-size 0.9em;*/ /*margin 0px 0px 0px 15px; /*padding 0px 0px 5px 0px;*/ /*width 173px;*/ } #menubar ul.avmenu ul a{ /*padding 3px 1px 3px 5px;*/ /*width 163px;*/ } #menubar ul.avmenu ul ul{ /*font-size 1em;*/ /*width 160px;*/ } #menubar ul.avmenu ul ul a{ /*width 148px;*/ } #menubar{ /*float left;*/ /*margin 0px 0px 10px;*/ /*padding 10px;*/ /*width 200px;*/ /*overflow hidden;*/ /*background url(/common/_img/skin/037flower/menubg.gif) repeat-x bottom left #f4f4f4;*/ /*border-bottom 1px solid #d8d8d8;*/ /*border-left 4px solid #ccc;*/ /*border-right 1px solid #d8d8d8;*/ /*border-top 1px solid #d8d8d8;*/ /*clear left;*/ /*color #505050;*/ /*line-height 1.3em;*/ } #menubar p,.announce p{ /*font-size 0.9em;*/ } /**** Main content variations ****/ #content{ /*line-height 1.5em;*/ /*margin 10px 150px 10px 160px;*/ /*padding 0px;*/ /*text-align left;*/ } #contents{ /*line-height 1.5em;*/ /*margin 10px 0px 10px 0px;*/ /*padding 0px;*/ /*text-align left; /*float right;*/ /*overflow hidden;*/ /*width 850px;*/ } #content h2, #contents h2{ /*font-size 1.8em;*/ /*letter-spacing -1px;*/ /*margin 8px 0px 10px;*/ /*padding 0px;*/ } #content h3, #contents h3{ /*font-size 1.5em;*/ /*margin 6px 0px;*/ /*padding 0px;*/ } #content img, #contents img{ /*background #ccc;*/ /*border 4px solid #f0f0f0;*/ /*color #303030;*/ /*display inline;*/ /*padding 1px;*/ /*margin 0px 10px 5px 0px;*/ } #content ul, #content ol, #contents ul, #contents ol{ /*margin 0px 0px 16px 20px;*/ /*padding 0px;*/ } #content ul ul, #content ol ol, #contents ul ul, #contents ol ol{ /*margin 2px 0px 2px 20px;*/ } #content li, #contents li{ /*margin 0px 0px 2px 10px;*/ /*padding 0px 0px 0px 4px;*/ } #content-inner{ /*overflow hidden;*/ } /**** Footer ****/ #footer{ /*background #fff;*/ /*border-top 2px solid #dadada;*/ /*clear both;*/ /*color gray;*/ /*font-size 0.9em;*/ /*margin 0px auto;*/ /*padding 8px 0px;*/ /*text-align center;*/ /*width 1000px;*/ } #footer hr{ /*display none;*/ } #footer a{ /*background inherit;*/ /*color gray;*/ /*font-weight 400;*/ /*text-decoration none;*/ } #footer a hover{ /*text-decoration underline;*/ } /**** Links ****/ a{ /*background inherit;*/ /*color #166090;*/ /*text-decoration none;*/ /*font-weight 700;*/ } a hover{ /*background inherit;*/ /*color #286ea0;*/ /*text-decoration underline;*/ } a img{ /*border 0;*/ } p{ /*margin 0px 0px 16px;*/ } /**** Various classes ****/ .textright{ /*margin -10px 0px 4px;*/ /*text-align right;*/ } .center{ /*text-align center;*/ } .small{ /*font-size 0.8em;*/ } .large{ /*font-size 1.3em;*/ } .highlighted{ /*background #f0f0f0;*/ /*border 1px solid #b0b0b0;*/ /*color #303030;*/ /*padding 3px;*/ } .button{ /*background url(/common/_img/skin/037flower/menubg.gif) repeat-x bottom left #f4f4f4;*/ /*border-bottom 1px solid #d8d8d8;*/ /*border-left 4px solid #ccc;*/ /*border-right 1px solid #d8d8d8;*/ /*border-top 1px solid #d8d8d8;*/ /*color #505050;*/ /*font-weight 700;*/ /*margin 0px 0px 15px;*/ /*padding 7px 7px 7px 11px;*/ /*width 120px;*/ } .left{ /*float left;*/ /*margin 10px 10px 5px 0px;*/ } .right{ /*float right;*/ /*margin 10px 0px 5px 10px;*/ } /**** General Rules ****/ p, dl, multicol{ /*display block;*/ /*margin 1em 0px;*/ } dd{ /*display block;*/ /*margin-left 20px;*/ } dt{ /*font-weight bold;*/ } blockquote{ /*display block;*/ /*margin 1em 0px;*/ } address{ /*display block;*/ /*font-style italic;*/ } center{ /*display block;*/ /*text-align center;*/ } h1{ /*margin 1em 0px;*/ /*font-size 2.2em;*/ /*font-weight bold;*/ } h2{ /*margin 1em 0px;*/ /*font-size 1.8em;*/ /*font-weight bold;*/ } h3{ /*margin 1em 0px;*/ /*font-size 1.4em;*/ /*font-weight bold;*/ } h4{ /*margin 1em 0px;*/ /*font-size 1.2em;*/ /*font-weight bold;*/ } h5{ /*margin 1em 0px;*/ /*font-size 1.1em;*/ /*font-weight bold;*/ } h6{ /*margin 1em 0px;*/ /*font-size 1em;*/ /*font-weight bold;*/ } xmp, pre, plaintext{ /*display block;*/ /*font-family fixed;*/ /*margin 1em 0px;*/ /*white-space -moz-pre-wrap;*//**** Mozilla ****/ /*white-space -pre-wrap;*//**** Opera 4-6 ****/ /*white-space -o-pre-wrap;*//**** Opera 7 ****/ /*white-space pre-wrap;*//**** CSS3 ****/ /*word-wrap break-word;*//**** IE 5.5+ ****/ } table{ /*display table;*/ /*border-spacing 2px;*/ /*border-collapse collapse;*/ /*margin-top 1em;*/ /*margin-bottom 1em;*/ /*-moz-box-sizing border-box;*/ /*text-indent 0px;*/ /*border 1px solid #aaa;*/ } caption{ /*display table-caption;*/ /*text-align center;*/ } tr{ /*display table-row;*/ /*vertical-align inherit;*/ } col{ /*display table-column;*/ } colgroup{ /*display table-column-group;*/ } table{ /*margin-left 1px;*/ } tbody{ /*display table-row-group;*/ /*vertical-align middle;*/ } thead{ /*display table-header-group;*/ /*vertical-align middle;*/ } tfoot{ /*display table-footer-group;*/ /*vertical-align middle;*/ } table tr{ /*vertical-align middle;*/ } td{ /*display table-cell;*/ /*vertical-align inherit;*/ /*text-align inherit; */ /*padding 3px;*/ /*border 1px solid #999;*/ } th{ /*display table-cell;*/ /*vertical-align inherit;*/ /*font-weight bold;*/ /*padding 3px;*/ /*border 1px solid #999;*/ } q before{ /*content open-quote;*/ } q after{ /*content close-quote;*/ } b, strong{ /*font-weight bolder;*/ } i, cite, em, var, dfn{ /*font-style italic;*/ } u, ins{ /*text-decoration underline;*/ } s, strike, del{ /*text-decoration line-through;*/ } sub{ /*vertical-align sub;*/ /*font-size smaller;*/ /*line-height normal;*/ } sup{ /*vertical-align super;*/ /*font-size smaller;*/ /*line-height normal;*/ } nobr{ /*white-space nowrap;*/ } ul{ /*display block;*/ /*list-style-type disc;*/ /*margin 1em 0px;*/ /*padding-left 25px;*/ } ol{ /*display block;*/ /*list-style-type decimal;*/ /*margin 1em 0px;*/ /*padding-left 25px;*/ } li{ /*display list-item;*/ } ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl{ /*margin-top 3px;*/ /*margin-bottom 3px;*/ } ol ul, ul ul{ /*list-style-type circle;*/ } ol ol ul, ol ul ul, ul ol ul, ul ul ul{ /*list-style-type square;*/ } hr{ /*display block;*/ /*height 1px;*/ /*border 1px 0;*/ /*margin 0.5em auto 0.5em auto;*/ } /****/ blockquote, pre{ /*background url(/common/_img/skin/037flower/menubg.gif) repeat-x bottom left #f4f4f4;*/ /*border-bottom 1px solid #d8d8d8;*/ /*border-left 4px solid #ccc;*/ /*border-right 1px solid #d8d8d8;*/ /*border-top 1px solid #d8d8d8;*/ /*color #505050;*/ /*padding 7px 7px 7px 11px;*/ } blockquote{ /*font-size 1.1em;*/ /*line-height 1.3em;*/ } blockquote{ /*border-left-color #5ebbda;*/ } pre{ /*border-left-color #eb72fd;*/ } /**** Tables and forms ****/ table{ /*border 1px solid #d8d8d8;*/ /*border-collapse collapse;*/ /*line-height 1.3em;*/ /*smargin 0 0 16px;*/ /*padding 0px;*/ } caption{ /*font-size 1.5em;*/ /*font-weight 400;*/ /*margin 0px;*/ /*padding 6px 0px 8px;*/ /*text-align left;*/ } th{ /*background url(/common/_img/skin/037flower/menubg2.gif) repeat-x bottom left #eaeaea;*/ /*color #505050;*/ /*padding 7px;*/ /*text-align left;*/ /*border none;*/ /*border-right 1px solid #eaeaea;*/ } tr{ /*border none;*/ } td{ /*background url(/common/_img/skin/037flower/menubg.gif) repeat-x bottom left #f4f4f4;*/ /*color #303030;*/ /*font-size 0.9em;*/ /*padding 7px;*/ /*text-align left;*/ /*border none;*/ /*border-right 1px solid #eaeaea;*/ } input, textarea{ /*border 1px solid #ccc;*/ /*font-size 1em;*/ /*margin 0px;*/ /*padding 4px;*/ } label{ /*margin 2px;*/ } /*****/ #tarea_wiki, .cmd_backup{ /*max-width 520px;*/ } pre.diff{ /*background #fff;*/ /*border 1px solid #999;*/ /*color #333;*/ } #contents .edit img{ /*background none;*/ /*border none;*/ /*display inline;*/ /*margin 5px 0px 0px 0px;*/ /*padding 0px;*/ } #menubar .plugin_comment{ /*width 180px;*/ } #menubar .plugin_comment input{ /*width 95px;*/ } #atwiki-jp-bg1{ /*height 250px;*/ } /**** Original open source design by Andreas Viklund - http //andreasviklund.com Released through OSWD.org ****/ (since 2022/01/12)
https://w.atwiki.jp/memo77/pages/26.html
PageLastUpdate 2012-07-05/today - /yesterday - 印刷時のみ適用するcss ありがちな間違い tDiaryテーマとはてなテーマDOCUTYPE宣言ではまった はてなのメニュー部分ではまった wikiで使うための数値実体参照 Internet Explorer Developer Toolbar あなたのページを最速にする14の掟 よく使うサイト comment とにかく基本はAnother HTML-lint gatewayで自分のサイトをチェックして、ダメなところを徹底的に潰すこと。これをやってるうちに、少しづつ知識がついてくる。 印刷時のみ適用するcss とりあえず@ウィキのこのデザインで印刷時に余計な要素を表示させないサンプル 2012/07/05 @media print { form {display none; } .noprint {display none; } .ddsmoothmenu {display none; } .header {display none; } .footer {display none; } .ads {display none; } #body-footer {display none; } .outer { border-left none; border-right none; } body { font 8pt serif; }} ありがちな間違い スクリプトでcgi呼び出すときに、パラメータ中に?a=1 b=2みたいな記述があるときに を にし忘れる。 tDiaryテーマとはてなテーマ 2007/05/01 なんかtDiaryのテーマとか選んでいるうちに、いじらざるを得なくなってきた。せっかくなので勉強しよう。 tDiaryテーマの作り方 http //www.tdiary.org/doc/HOWTO-make-theme.html テーマ向けHTMLの構造図解 http //tnat.net/img/tdiary_css.png テーマ別によるスタイルシートサンプル http //joram.agz.jp/hatena/theme_body.html#link DOCUTYPE宣言ではまった 2007/05/04 検索語:はてなダイアリー/スキン/テーマ/デザイン/tdiary/崩れる adiareyとimg0chに同じテーマを指定しても同じにならない。adiaryははてなとほぼ同じになるけどimg0chが崩れます。 要素を一個一個つぶしていっても直らない。まったく同じ構造までたどり着いて、img0chのDOCUTYPE宣言にloose.dtdがついてるのに気が付く。 adiary/はてな !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" img0ch !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http //www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" tDiary !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http //www.w3.org/TR/html4/strict.dtd" で、これが原因でしたorz そっかー、dtdのあるなしで標準モードと互換モードというのがあるのね。勉強になった・・・ http //desperadoes.biz/style/mode.php 追記:と思ったら、tDiaryはTransitionalじゃなくてstrict.dtdがついてる。これはデザインの共有で問題にならないのかしらん? さらに追記:img0chのテンプレートや吐き出されてるのは !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" だった。なんで勘違いしたかというと、IEからHTMLとして保存すると、自動的に !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http //www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" になるようだ。 はてなのメニュー部分ではまった はてなの一番上のメニュー部分はテーマによって違うらしい。テーブルレイアウトでくるときとそうじゃないときがあるよ。 たぶん古い table border="0" width="100%" cellspacing="0" cellpadding="0" id="banner" ... たぶん新しい div id="simple-header" ... wikiで使うための数値実体参照 2007/05/05 HTMLで使える文字実体参照 http //www.ne.jp/asahi/minazuki/bakera/html/reference/charref 文字 数値実体参照 用途 | | テーブル中で|を書く必要があるとき Internet Explorer Developer Toolbar 2007/05/11 Webページの構造を検証できるMicrosoft純正IE用プラグイン。 http //www.forest.impress.co.jp/article/2007/05/11/iedevtoolbar.html あなたのページを最速にする14の掟 http //blog.livedoor.jp/dankogai/archives/50828720.html HTTPリクエストは最小限に - Make fewer HTTP requests CDNを活用 - Use a CDN Expiresヘッダを利用 - Add an Expires header コンテンツはGzipせよ - Gzip components CSSは上に - Put CSS at the top JSは下に - Move JS to the bottom CSSのexpressionの利用は控えよ - Avoid CSS expressions JSとCSSは外部化せよ - Make JS and CSS external DNS参照を抑えよ - Reduce DNS lookups JSを「縮刷」せよ - Minify JS リダイレクトは控えよ - Avoid redirects スクリプトの重複を削除せよ - Remove duplicate scripts ETagはオフにせよ - Turn off ETags AJAXを小さくしてキャッシュ可能にせよ - Make AJAX cacheable and small よく使うサイト HTML鳩丸倶楽部 http //www.ne.jp/asahi/minazuki/bakera/html/hatomaru comment このページの記述で聞きたいこととか間違ってることとかありましたらコメントを。 名前 コメント すべてのコメントを見る
https://w.atwiki.jp/api_programming/pages/48.html
下位ページ フォント・テキスト フォーム(Form) レイアウト レスポンシブデザイン 画像 色 Content リンク form CSS適用の優先順位 CSSのコメントアウト モバイルサイト用の表示CSS jQuery Mobile 画像のフィルタ 表表をつくる 行をつくる 列をつくる左寄せ、センタリング、右寄せ 要素の表示、非表示 ポップアップ風のメニューを仕込む(主にcssで) エラー時のステータスコード 流行りのUIをコード付きで紹介 ウェブサイトのUIに悩んだときにインスピレーションが受けられるサイト「inspiration ui」 ロゴのジェネレータ Instagram風の写真加工ができるCSSライブラリ「CSSGram」 簡易なチャートグラフを手軽に描けるサイト「BEAM」 200万点以上のアイコンをベクター形式でダウンロードできるサイト「iconshock」 HTMLクイックリファレンス ★スタイルシートリファレンス(目的別) - HTMLクイックリファレンス リンク 新しいウィンドウ(タブ)で開く a href="~" target="_blank" /a form FORM - HTMLクイックリファレンス CSS 適用の優先順位 全体に適用されるものと局所に適用される者では、局所に適用されるものが優先される。#xyz p p#xyz #xyz 上書きされるので、最後に読み込まれたものが適用される。 強制的に優先順位を上げるには !important を付ける p {color red !important;} /*この値が最優先されて有効となる*/ スタイルの優先順位 - HTML クイックリファレンス CSSのコメントアウト /* コメントアウト */ // は使えない(認識する場合もあるらしい) http //monopocket.jp/blog/css/1278/ モバイルサイト用の表示CSS jQuery Mobile Javascript/jQuery Mobile 画像のフィルタ http //migo-media.com/css-filter/ 表 a aa aaa b bb bbb TABLE - ★HTMLタグリファレンス 行をつくる→行の中に列をつくる table tr th ... /th td ... /td /tr tr th ... /th td ... /td /tr /table 表をつくる table ... /table 行をつくる tr ... /tr 列をつくる tr td ... /td /tr 左寄せ、センタリング、右寄せ td align="right" } 要素の表示、非表示 タグはあるけれど、表示はされない、という状態をつくる visiblity display 非表示・使用不可 visiblity - HTMLクイックリファレンス(スタイルシートリファレンス) display - HTMLクイックリファレンス(スタイルシートリファレンス) ポップアップ風のメニューを仕込む(主にcssで) メニューボタン(メニューアイコン)にポップアップルメニューとなるdiv要素を仕込んでおく。そのdiv要素は普段は display none を設定しておく。(もしくはjavascript等でクリックしたときに生成するようにしておく) クリックしたら display block(とか) で表示させる。この時、 レイアウトを崩さないように、position absolute(メニューボタン位置に連動させるなら、親にposition relaltiveも)を仕込む z-index を設定して、他の要素より前に出す。 親要素に overflow hidden が設定してると、親の枠外に飛び出せなくなる。 ので注意する。 エラー時のステータスコード HTTPステータスコード - Wikipedia 流行りのUIをコード付きで紹介 CodeMyUI.com - http //codemyui.com/ ウェブサイトのUIに悩んだときにインスピレーションが受けられるサイト「inspiration ui」 http //inspirationui.com/ ロゴのジェネレータ http //girlsnet.ninpou.jp/logo.html Instagram風の写真加工ができるCSSライブラリ「CSSGram」 http //una.im/CSSgram/ 簡易なチャートグラフを手軽に描けるサイト「BEAM」 BEAM 200万点以上のアイコンをベクター形式でダウンロードできるサイト「iconshock」 iconshock
https://w.atwiki.jp/wiki1_eki/pages/169.html
CSS @charset "utf-8"; { box-sizing border-box} { -moz-box-sizing border-box} { margin 0px; padding 0px; } body{ margin 0; color #333; background #fff; } /* 基本リンクスタイル */ a link{color #000;text-decoration underline;} a visited{color #666;text-decoration underline;} a hover{color #333;text-decoration none;} a active{color #333;} /* メイン全体の枠 */ #container /* ----- Header ----- */ #headbar #headbar a{color #333;text-decoration none;} #headbar a hover{color #333;text-decoration underline;} .wikilogo{ /* アットウィキロゴマーク */ position absolute; left 2px; top 2px; text-align left; } .barRight{ /* ページ上部バーの右部分 */ position absolute; right 2px; top 0px; text-align right; background-color #fff; } .barRight input{ background #FFF; } .links_pul_menu{ /* ページ上部のプルダウンメニュー */ position absolute; right 2px; margin-top 3px; } #banner #banner h1{ /* サイトタイトル */ font-size 24px; padding 15px; margin 0; border-bottom none; border-left none; } #banner p{ /* ページタイトル */ font-size 16px; padding 2px 20px; } #banner a link{color #333;text-decoration none;} #banner a visited{color #333;text-decoration none;} #banner a hover{color #666;text-decoration none;} #banner a active{color #666;text-decoration none;} /* ----- Tab ----- */ plugin_tab is not found. please feed back @wiki. plugin_tab is not found. please feed back @wiki. a{text-decoration none;} .tab01{ text-align center; width 60px; border #333 solid 1px; border-width 1px 1px 0; padding 3px; float left; margin-right 10px; } .tab02{ text-align center; width 70px; border #333 solid 1px; border-width 1px 0 0 1px; background #fff; padding 3px; float left; } .tab03{ text-align center; width 70px; border #333 solid 1px; border-width 1px 0 0 1px; background #fff; padding 3px; float left; } .tab04{ text-align center; width 80px; background #fff; padding 3px; float left; color #000; border #333 solid 1px; border-width 1px 1px 0 1px; } .tab05{ text-align center; width 65px; background #fff; padding 3px; float left; border #333 solid 1px; border-width 1px 1px 0; } .newpage{ border #333 solid 1px; border-width 1px 1px 0; width 120px; padding 4px 0 3px 17px; margin-left 10px; float left; } /* ----- Tab Link ----- */ plugin_tab is not found. please feed back @wiki. a link{color #333;text-decoration none;} plugin_tab is not found. please feed back @wiki. a visited{color #333;text-decoration none;} plugin_tab is not found. please feed back @wiki. a hover{color #333;text-decoration underline;} plugin_tab is not found. please feed back @wiki. a active{color #333;text-decoration underline;} /* ----- Contents ----- */ /* コンテンツの配置 */ /*\*/ html #wrapper{height 1%;} /**/ #wrapper #content margin-top -13px; width 188px; float left; overflow auto; /*\*/ html #left{ position relative; top 0; } /*\*/ width 135px; float right; /* ----- Center ----- */ #wiki #wikibodytop #wikibody #wikibodybottom /* ----- Main ----- */ .main{ color #333; text-align left; } .posted{ /* トラックバック リンクの表示 */ font-size 11px; text-align right; margin 20px 0 5px; } .posted a link{} .posted a visited{} .posted a hover{} .posted a active{} .attach, .footnote{ float left; text-align left; font-size 12px; } /* ----- Left Right----- */ #lefttop ,#righttop{} #leftbottom ,#rightbottom{} /* ----- Ads ----- */ #adtitle .ad{ font-size 12px; text-align center; } #adbottom /* ----- Copyright ----- */ #copyright #powered #syndicate #syndicate a{color fff;} /* ----- Footer ----- */ #footbar #footbar a{color #000;} #footer /* General */ .main h1{ color #000; font-size 24px; padding 5px; margin-left 5px; } .main h2{ color #000; font-size 20px; padding 5px; margin-left 8px; } .main h3{ color #333; font-size 18px; padding 5px; margin-left 12px; } .main h4{ color #333; font-size 16px; padding 5px; margin-left 15px; } .main h5{ color #333; font-size 14px; padding 5px; margin-left 20px; } .main h6{ color #333; font-size 12px; padding 5px; margin-left 20;x } img { border none; vertical-align middle; } hr{ margin-top 5px; margin-bottom 5px; } ul,ol{ padding 0; margin 0; margin-left 20px; } ul li { margin 0 0px 0 10px; padding 0; line-height 150%; } ol li { margin 0 0px 0 10px; padding 0; line-height 150%; } dt { font-weight bold; margin-top 1em; margin-left 1em; } .main table, #right table, #left table{ padding 0px; border 0px; text-align left; color inherit; table-layout auto; border-collapse collapse; } .main th, #right th, #left th { padding 5px; margin 1px; text-align center; color inherit; border 1px solid #666; } .main td, #right td, #left td { font-size 12px; padding 5px; margin 1px; color inherit; border 1px solid #666; } .main tr, #right tr, #left tr { font-size 12px; padding 5px; margin 1px; color inherit; border 1px solid #666; } pre { border #666 1px dotted; padding 5px; margin 5px 0px 5px 5px; white-space pre; color #000; background #eee; } blockquote { margin 5px 0px 5px 5px; padding 5px; border #666 1px solid; color #00; background #eee; } em { font-style italic; } strong { font-weight bold; } address { font-style normal; } .plugin_vote table{ border 1px solid #666; margin 3px; } /* 警告文 */ .warning, .warning{ color #FCC; } /* 非表示 */ .hidden{ display none; } /* 差分など */ span.diff_add{ color red; background-color #FFF; } span.diff_del{ color blue; background-color #FFF; } /* 検索結果表示 */ span.word1{ color black; background-color #ffff66; } span.word2{ color black; background-color #a0ffff; } span.word3{ color black; background-color #99ff99; } span.word4{ color black; background-color #ff9999; } span.word5{ color black; background-color #ff66ff; } span.word6{ color white; background-color #880000; } span.word7{ color white; background-color #00aa00; } span.word8{ color white; background-color #886800; } span.word9{ color white; background-color #004699; } span.word10{ color white; background-color #990099; } .gloss { color black; text-decoration underline; cursor hand; font-family "Verdana"; } #overDiv h4{ margin 10px 3px; color #000; font-size 120%; } #overDiv #overDiv table table{ padding 3px 5px; } #overDiv table{ padding 1px; }
https://w.atwiki.jp/eccube2ch/pages/25.html
CSS編集
https://w.atwiki.jp/king1/
/**** ロゴ画像を変更したい場合は、以下のURLをロゴのURLに書き換えてください。****/ #atwiki-jp-bg1{ /*background transparent url(/common/_img/atwiki_logo_small.svg) no-repeat scroll 0 0;*/ /*padding-left 130px;*/ /*height 100px;*/ } #header a#atwiki-jp-bg1{ /*height 100px;*/ /*width 100px;*/ } /****ads****/ .gafc_on{ /*background-color #FEFF8F;*/ } .gafc_domain{ /*color green;*/ } /**** ページ下部の編集メニューを表示したい場合はユーザCSSに以下の1行を追加してください。 #toolbar{display block;} ****/ body{ /*background #fff;*/ /*color #666;*/ /*font-family "arial", "helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "MS Pゴシック", clean, sans-serif;*/ /*font-size 13px;*/ /*font-size-adjust none;*/ /*font-stretch normal;*/ /*font-style normal;*/ /*font-variant normal;*/ /*font-weight normal;*/ /*line-height normal;*/ } body{ /*line-height 1.5;*/ } a link, a visited{ /*color #480;*/ } a hover, a active{ /*color #FFA500;*/ } .box after{ /*clear both;*/ /*content ".";*/ /*display block;*/ /*height 0pt;*/ /*visibility hidden;*/ } .box{ /*zoom 100%;*/ } /****/ #header{ /*padding-top 20px;*/ /*margin 0px 25px 15px 25px;*/ /*border-bottom 3px solid #FFA500;*/ /*height 130px;*/ } #header a#atwiki-jp-bg1{ /*display block;*/ /*float left;*/ /*margin 20px 25px 20px 5px;*/ } #header h1, #header h2{ /*margin 0;*/ /*padding 0;*/ /*line-height 1;*/ } #header h1{ /*padding-top 20px;*/ /*padding-bottom 4px;*/ } #header h1 a{ /*color #6c0;*/ /*font-size 40px;*/ /*text-decoration none;*/ /*line-height 1;*/ } #header h2 a{ /*color #333;*/ /*font-size 15px;*/ /*text-decoration none;*/ /*line-height 1;*/ } #container{ /*min-width 1100px;*/ /*_width 1100px;*/ /*text-align left;*/ } #wrapper{ } #footer, #toolbar{ /*width 100%;*/ /*clear left;*/ } #toolbar{ /*display none;*/ } #contents{ /*margin-right 25px;*/ /*margin-left 214px;*/ /*_margin-left 264px;*/ /*border 2px dotted #FFA500;*/ /*padding 10px;*/ /*overflow hidden;*/ /*min-width 800px;*/ } #menubar{ /*margin-left 20px;*/ /*width 210px;*/ /*float left;*/ /*overflow hidden;*/ /*padding 10px;*/ } #menubar2{ /*width 165px;*/ /*float left;*/ /*overflow hidden;*/ /****border 2px dotted #FFA500;****/ } #menubar_inner, #menubar_inner2{ /*padding 10px;*/ } .menu fieldset{ /*width 180px;*/ /*overflow hidden;*/ } .menu select{ /*max-width 180px;*/ } .menu input{ /*max-width 180px;*/ } .menu textarea{ /*max-width 180px;*/ /*background #fff;*/ } #footer_inner{ /*padding 10px 25px;*/ } #toolbar_inner{ /*padding 10px 25px 0 25px;*/ } /**** General Rules ****/ p, dl, multicol{ /*display block;*/ /*margin 1em 0;*/ } dd{ /*display block;*/ /*margin-left 20px;*/ } dt{ /*font-weight bold;*/ } blockquote{ /*display block;*/ /*margin 1em;* / } blockquote{ /*border-left 3px solid #FFA500;*/ /*padding-left .5em;*/ } address{ /*display block;*/ /*font-style italic;*/ } center{ /*display block;*/ /*text-align center;*/ } h1{ /*margin 13px 0;*/ /*font-size 167%;*/ /*font-weight bold;*/ } h2{ /*margin 13px 0;*/ /*font-size 152%;*/ /*font-weight bold;*/ } h3{ /*margin 13px 0;*/ /*font-size 144%;*/ /*font-weight bold;*/ } h4{ /*margin 13px 0;*/ /*font-size 129%;*/ /*font-weight bold;*/ } h5{ /*margin 13px 0;*/ /*font-size 114%;*/ /*font-weight bold;*/ } h6{ /*margin 13px 0;*/ /*font-size 100%;*/ /*font-weight bold;*/ } xmp, plaintext{ /*display block;*/ /*font-family fixed;*/ /*margin 1em 0;*/ /*white-space -moz-pre-wrap;*//**** Mozilla ****/ /*white-space -pre-wrap;*//**** Opera 4-6 ****/ /*white-space -o-pre-wrap;*//**** Opera 7 ****/ /*white-space pre-wrap;*//**** CSS3 ****/ /*word-wrap break-word;*//**** IE 5.5+ ****/ } pre{ /*display block;*/ /*font-family fixed;*/ /*margin 1em 0;*/ /*white-space -moz-pre-wrap;*//* Mozilla */ /*white-space -pre-wrap;*//* Opera 4-6 */ /*white-space -o-pre-wrap;*//* Opera 7 */ /*white-space pre-wrap;*//* CSS3 */ /*word-wrap break-word;*//* IE 5.5+ */*/ } pre{ /*background #fd8;*/ /*padding 10px;*/ /*color #333;*/ } table{ /*display table;*/ /*border-spacing 2px;*/ /*border-collapse collapse;*/ /*margin-top 1em;*/ /*margin-bottom 1em;*/ /*-moz-box-sizing border-box;*/ /*text-indent 0;*/ /*border 1px solid #aaa;*/ } caption{ /*display table-caption;*/ /*text-align center;*/ } tr{ /*display table-row;*/ /*vertical-align inherit;*/ } col{ /*display table-column;*/ } colgroup{ /*display table-column-group;*/ } tbody{ /*display table-row-group;*/ /*vertical-align middle;*/ } thead{ /*display table-header-group;*/ /*vertical-align middle;*/ } tfoot{ /*display table-footer-group;*/ /*vertical-align middle;*/ } table tr{ /*vertical-align middle;*/ } td{ /*display table-cell;*/ /*vertical-align inherit;*/ /*text-align inherit;*/ /*padding 3px;*/ /*border 1px solid #999;*/ } th{ /*display table-cell;*/ /*vertical-align inherit;*/ /*font-weight bold;*/ /*padding 3px;*/ /*border 1px solid #999;*/ } q before{ /*content open-quote;*/ } q after{ /*content close-quote;*/ } b, strong{ /*font-weight bolder;*/ } i, cite, em, var, dfn{ /*font-style italic;*/ } u, ins{ /*text-decoration underline;*/ } s, strike, del{ /*text-decoration line-through;*/ } sub{ /*vertical-align sub;*/ /*font-size smaller;*/ /*line-height normal;*/ } sup{ /*vertical-align super;*/ /*font-size smaller;*/ /*line-height normal;*/ } nobr{ /*white-space nowrap;*/ } ul{ /*display block;*/ /*list-style-type disc;*/ /*margin 1em 0;*/ /*padding-left 25px;*/ } ul{ /*list-style-image url(/common/_img/skin/035col3/menu_arrow.gif);*/ } ol{ /*display block;*/ /*list-style-type decimal;*/ /*margin 1em 0;*/ /*padding-left 25px;*/ } li{ /*display list-item;*/ } ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl{ /*margin-top 0;*/ /*margin-bottom 0;*/ } ol ul, ul ul{ /*list-style-type circle;*/ } ol ol ul, ol ul ul, ul ol ul, ul ul ul{ /*list-style-type square;*/ } hr{ /*display block;*/ /*height 1px;*/ /*border 1px 0;*/ /*margin 0.5em auto 0.5em auto;*/ } (since 2021/12/21)